{extend name="../../mxadmin/view/base" /}

{block name="title"}文章管理{/block}

{block name="body"}
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 表格工具栏 -->
            <form class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">所属栏目</label>
                        <div class="layui-input-inline">
                            <div id="classifyParentSelSearch" class="mx-xmselect-tree"></div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">文章标题</label>
                        <div class="layui-input-inline">
                            <input name="title" class="layui-input" autocomplete="off" placeholder="输入标题关键词"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">状&emsp;态</label>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">--- 全部 ---</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">&emsp;
                        <button class="layui-btn icon-btn" lay-filter="mxTbSearch" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="mxTable" lay-filter="mxTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="mxTbBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 表格状态列 -->
<script type="text/html" id="mxTbState">
    <input type="checkbox" lay-filter="mxTbStateCk" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" {{d.status==1?'checked':''}} style="display: none;"/>
    <p style="display: none;">{{d.status==1?'启用':'禁用'}}</p>
</script>
{/block}

{block name="script"}
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;

        /* 渲染表格 */
        var insTb = table.render({
            elem: '#mxTable',
            url: "{:url('cms/article/datalist')}",
            page: {limit: 15},
            limits: [15, 30, 45, 60, 75, 90, 100, 200, 500],
            toolbar: ['<p>',
                '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>批量删除</button>',
                '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加文章</button>&nbsp;',
                '</p>'].join(''),
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'},
                {field: 'name', title: '所属栏目', align: 'center'},
                {field: 'title', title: '文章标题'},
                {field: 'weight', title: '排序权重', align: 'center', sort: true, width: 110, edit: 'text'},
                {field: 'username', title: '发布人', align: 'center'},
                {field: 'create_time', title: '创建时间', align: 'center', sort: true},
                {field: 'update_time', title: '更新时间', align: 'center', sort: true},
                {field: 'status', title: '状态', templet: '#mxTbState', align: 'center', sort: true, width: 100},
                {title: '操作', toolbar: '#mxTbBar', align: 'center', minWidth: 180}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
        });

        /* 渲染下拉树 */
        var insXmSelSearch = xmSelect.render({
            el: '#classifyParentSelSearch',
            height: '400px',
            name: 'cid',
            model: {label: {type: 'text'}},
            prop: {
                name: 'name',
                value: 'id'
            },
            radio: true,
            clickClose: true,
            filterable: true,
            filterMethod: function(val, item, index, prop){
                if(item.name.toLowerCase().indexOf(val.toLowerCase()) != -1){ //名称中包含的大小写都搜索出来
                    return true;
                }
                return false; //其他的就不要了
            },
            searchTips: '请输入关键词进行搜索',
            tree: {
                show: true,
                indent: 15,
                strict: false,
                expandedKeys: true
            },
            data: {:json_encode($category)},
        });

        /* 表格搜索 */
        form.on('submit(mxTbSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}, url:"{:url('cms/article/serach')}"});
            return false;
        });

        /* 表格操作列点击事件 */
        table.on('tool(mxTable)', function (obj) {
            if (obj.event === 'edit') { // 修改
                showModel(obj.data);
            } else if (obj.event === 'del') { // 删除
                doDel(obj);
            }
        });

        /* 监听单元格编辑 */
        table.on('edit(mxTable)', function(obj){
            if(isNaN(obj.value)){
                layer.msg('只能输入数字！', {icon: 5, anim: 6});
                return false;
            }
            var loadIndex = layer.load(2);
            $.post("{:url('cms/article/edit_weight_same')}", {
                id: obj.data.id,
                weight: obj.value
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 1) {
                    layer.msg(res.msg);
                    insTb.reload();
                } else {
                    layer.msg(res.msg, {icon: 5, anim: 6});
                }
            }, 'json');
        });

        /* 表格头工具栏点击事件 */
        table.on('toolbar(mxTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                showModel();
            } else if (obj.event === 'del') { // 删除
                var checkRows = table.checkStatus('mxTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 5, anim: 6});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                doDel({ids: ids});
            }
        });

        /* 显示表单弹窗 */
        function showModel(mData) {
            var layIndex = admin.open({
                title: (mData ? '修改' : '添加') + '文章',
                shade: 0.5,
                //shadeClose: true,
                url: "{:url('cms/article/form')}",
                data: {formdata: mData},     // 传递数据到表单页面
                end: function () {
                    if (admin.getLayerData(layIndex, 'formOk')) {  // 判断表单操作成功标识
                        insTb.reload();  // 成功刷新表格
                    }
                },
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    //$(layero).children('.layui-layer-content').css('overflow', 'visible');
                }
            });
            // 窗口打开即全屏
            layer.full(layIndex);
        }

        /* 删除 */
        function doDel(obj) {
            layer.confirm('确定要删除选中的数据吗？', {
                title: '删除数据',
                skin: 'layui-layer-admin',
                shade: 0.5,
                shadeClose: true,
            }, function (i) {
                layer.close(i);
                var loadIndex = layer.load(2);
                $.post("{:url('cms/article/del')}", {
                    id: obj.data ? obj.data.id : '',
                    ids: obj.ids ? obj.ids.join(',') : ''
                }, function (res) {
                    layer.close(loadIndex);
                    if (res.code === 1) {
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload();
                    } else {
                        layer.msg(res.msg, {icon: 5, anim: 6});
                    }
                }, 'json');
            });
        }

        /* 修改状态 */
        form.on('switch(mxTbStateCk)', function (obj) {
            var loadIndex = layer.load(2);
            $.post("{:url('cms/article/edit_state_same')}", {
                id: obj.elem.value,
                status: obj.elem.checked ? 1 : 0
            }, function (res) {
                layer.close(loadIndex);
                if (res.code === 1) {
                    layer.msg(res.msg);
                    insTb.reload();
                } else {
                    layer.msg(res.msg, {icon: 5, anim: 6});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });
    });
</script>
{/block}
